<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" dir="ltr" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html dir="ltr" lang="en-US"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

<title>Your title</title>

<!-- Add your required styles below this line -->

<!-- Stop adding styles -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/responsiveness.css" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <!-- jQuery UI -->

<!-- Add your required scripts below this line -->

<!-- Stop adding scripts -->
<script type="text/javascript" src="js/custom.js"></script><!-- Caffeine custom JS -->

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 
<!--[if lte IE 7]> <script src="js/IE8.js" type="text/javascript"></script> <![endif]--> 
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/> <![endif]--> 

</head>
<body id="index" class="home">
    <div id="loading-block"></div> <!-- Loading spinner animation -->
    	
    <!-- Container -->
    <div id="container">
    	<!-- Header -->
        <header id="header">
            <figure id="logo"><a href="login.php" class="logo"></a></figure>
            <section id="general-options">
                <a href="#" class="settings tipsy-header" title="Settings"></a>
                <a href="#" class="users tipsy-header" title="Users"></a>
                <a href="#" class="messages tipsy-header" title="Messages"></a>
            </section>
            <section id="userinfo">
                <span class="welcome">Welcome <strong>John Doe</strong>. It's nice having you back</span>
                <span class="last-login">Last login on June 1st at 11:24hs</span>
                <div class="profile">
                    <div class="links">
                        <a href="#">Profile</a>
                        <a href="#">Inbox</a>
                        <a href="#" class="logout">Logout</a>
                    </div>
                    <img src="img/profile-pict.jpg" alt="John Doe">
                </div>
            </section>
            <section id="responsive-nav">
                <select id="nav_select">
                    <option value="">Navigate</option>
                </select>
            </section>
        </header> <!-- Header -->
        
        <div class="clear"></div>
        
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-top"></div>
            
            <h3>Navigate</h3>
            <!-- Sidebar nav menu -->
            <ul class="nav">
                <li class="active"><a href="#">Dashboard</a></li>
                <li><a href="#">Another option</a>
                    <ul class="submenu">
                        <li><a href="#">Suboption</a></li>
                    </ul>
                </li>
                <li><a href="#">Last option</a></li>
            </ul> <!-- Sidebar nav menu -->
        </nav> <!-- Sidebar -->
        
        <!-- PLAYGROUND -->
        <section id="playground">
        
        </section> <!-- PLAYGROUND -->
        
    </div> <!-- Container -->
</body>
</html>